﻿@model DrillOnline.Services.DrillScenarios

@{
    ViewBag.Title = "CtrlPanel";
}

<h2>CtrlPanel</h2>

<script id="chatitem" type="text/html">
    <li style="display: none"><strong><%=datetimeScenariosTime%></strong> From <strong><%=stringGroup%>/<%=stringUser%></strong>
        <p><%=stringMessage%></p>
        <div>现实时间：<%=datetimeNow%></div>
    </li>
</script>

<script id="eventitem" type="text/html">
    <li style="display: none">
        <h2>[<%=SB%>]<br />
        <%=DATA.Title%></h2>
        <p><%=PS%>:<%=DATA.Content%></p>
    </li>
</script>

<h2 style="background-color: lightgray">Chat</h2>
<ul id="events" class="storyboard" style="float: left; width: 500px;">
</ul>
<div class="chatting" style="float: right; width: 400px;">
    <input type="text" id="message" />
    <input type="button" id="sendmessage" value="Send" />
    <input type="hidden" id="displayname" />
    <ul id="discussion">
    </ul>
</div>


@section scripts {

    <script src="~/Scripts/jquery.signalR-2.0.0.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.10.3.js"></script>
    <script src="~/Scripts/arttemplate.js"></script>

    <script src="~/signalr/hubs"></script>

    <script type="text/javascript">
        $(function () {
            var eventCount = 0;

            var scenario = $.connection.drillEventHub;

            scenario.client.Broadcast = function (result) {
                for (var i = 0; i < result.SceneList.length; i++) {
                    var sc = result.SceneList[i];
                    var sb = new Date(result.SB);
                    sb.setSeconds(sb.getSeconds() + sc.Offset * result.TR);
                    var ps = new Date(result.PS);
                    ps.setSeconds(ps.getSeconds() + sc.Offset);

                    var data = { SB: sb.toLocaleString(), PS: ps.toLocaleString(), DATA: sc };
                    $(template.render('eventitem', data)).prependTo($('#events'))
                        .fadeIn('slow');
                    eventCount++;
                }
                if (eventCount > 20) {
                    $("#events li:gt(10)").fadeOut().remove();
                    eventCount = 10;
                }
            };

            scenario.client.PushMessage = function (datetimeNow, stringUser, stringGroup, datetimeScenariosTime, stringMessage) {
                showMessage(datetimeNow, stringUser, stringGroup, datetimeScenariosTime, stringMessage);
            };


            $('#displayname').val('@(User.Identity.IsAuthenticated ? User.Identity.Name : "Guest")');

            $('#message').focus();

            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {

                    scenario.server.sendMessage(["GroupA", "GroupB"], $('#message').val());

                    $('#message').val('').focus();
                });
            });
        });
        // This optional function html-encodes messages for display in the page.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
    <script type="text/ecmascript">

        function showMessage(datetimeNow, stringUser, stringGroup, datetimeScenariosTime, stringMessage) {
            $(template.render('chatitem', { datetimeNow: datetimeNow, stringUser: stringUser, stringGroup: stringGroup, datetimeScenariosTime: datetimeScenariosTime, stringMessage: stringMessage })).prependTo($('#discussion'))
                .fadeIn("slow");
        }

    </script>
}
